<template>
  <div class="app">
    <el-container>
      <el-header>
        <PilotComponent></PilotComponent>
      </el-header>
      <el-container>
        <el-aside width="18%">
          <AsideComponent/>
        </el-aside>
        <el-container>
          <el-container>

            <el-main>

              <div v-if="this.searchText!==undefined ">
                <div v-if="this.searchText!=='_'">
                  <span>"{{searchText}}" 结果如下</span>
                </div>
                <el-dialog
                    :visible.sync="dialogCode"
                    width="600px"
                    :append-to-body="true"
                    center>
                  <BookInfoComponent :key="new Date().getTime()" :book="currentBook"/>
                  <span slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="read()">立即阅读</el-button>
                    <el-button @click="dialogCode = false">取 消</el-button>
                  </span>
                </el-dialog>
                <div class="content">
                  <div class="item" v-for="(item,index) in bookList" :key="index" @click="show(item)">
                      <div style="padding-left: 2px;padding-top: 0.2rem;">
                        <el-row :gutter="10">
                          <el-col :span="6">
                            <img :src="item.bookImg | url" alt="" style="height: 150px;border-radius: 10px;">
                          </el-col>
                          <el-col :span="16">
                            <div class="book-explain">
                              <h4>{{item.bookName}}</h4>
                              <div style="overflow:hidden;text-overflow: ellipsis;white-space: nowrap;">
                                <span>{{item.bookIntroduce}}</span>
                              </div>
                              <h6>{{item.bookAuthor}}·{{item.bookTotal}}万字</h6>
                            </div>
                          </el-col>
                          <el-col :span="2">
                            <div class="item-arrow">
                              <i class="el-icon-arrow-right"/>

                            </div>
                          </el-col>
                        </el-row>
                      </div>
                  </div>
                </div>

              </div>
              <div v-else>
                not search text
              </div>

            </el-main>
            <el-footer>
              <el-pagination

                  v-if="this.searchText!==undefined"
                  background
                  layout="prev, pager, next"
                  :total="total"
                  :current-page="currentPage"
                  :page-size="pageSize"
                  @current-change="current_change"
              />
            </el-footer>
          </el-container>
          <el-footer>
            <FooterComponent/>
          </el-footer>
        </el-container>

      </el-container>

    </el-container>
  </div>
</template>

<script>
import PilotComponent from "@/components/pilot/PilotComponent";
import FooterComponent from "@/components/footer/FooterComponent";
import AsideComponent from "@/components/aside/AsideComponent";
import {getBookListByType, getCountBySearchBookByType, getCountSearchBook, searchBook} from "@/utils/api";
import BookInfoComponent from "@/components/book/BookInfoComponent";

export default {
  name: "RecommendPage",
  components: {BookInfoComponent, AsideComponent, FooterComponent, PilotComponent},
  props: {},
  data() {
    return {
      searchText:undefined,
      bookList:Array,
      currentPage :1,
      total : 0,
      pageSize : 6,
      type : undefined,
      dialogCode: false,
      currentBook:Object
    }
  }, methods: {
    current_change(newPage){
      this.currentPage = newPage
      if(this.type){
        this.getBookListByType()
      }else{
        this.searchBook()
      }
    },
    read(){
      this.$router.push({name:"/ChapterPage",params:{book : this.currentBook}})
    },
    show(book){
      this.currentBook = book
      this.dialogCode = true
    },
    searchBook(){
      searchBook({
        keyword : this.searchText,
        currentPage : this.currentPage,
        pageSize : this.pageSize
      }).then(res=>{
        if(res.code ===200){
          // this.notify(res.message,"查询成功","success")
          // console.log(res)
          if(res.objects){
            this.bookList = res.objects
          }else{
            this.searchText = undefined
          }
        }
        else{
          console.error(res)
          this.notify(res.message,"error","error")
          this.searchText = undefined
        }
      })
    },
    getCountSearchBook(){

      getCountSearchBook({
        keyword : this.searchText
      }).then(res=>{
        if(res.code ===200){
          this.total = res.objects
        }
        else{
          console.error(res)
          this.total = 0
        }
      })
    },
    getBookListByType(){

      getBookListByType({
        type : this.type,
        currentPage : this.currentPage,
        pageSize : this.pageSize
      }).then(res=>{
        if(res.code ===200){
          // this.notify(res.message,"查询成功","success")
          if(res.objects){
            this.bookList = res.objects
          }else{
            this.searchText = undefined
          }
        }
        else{
          console.error(res)
          this.notify(res.message,"error","error")
          this.searchText = undefined
        }
      })
    },
    getCountBySearchBookByType(){

      getCountBySearchBookByType({
        type : this.type
      }).then(res=>{
        if(res.code ===200){
          this.total = res.objects
        }
        else{
          console.error(res)
          this.total = 0
          // this.searchText = undefined
        }
      })
    },

    notify(msg,title,type) {
      this.$notify({
        title: title,
        message: msg,
        type: type
      });
    },

  }, watch: {
  }, computed: {

  },created() {
    this.searchText = this.$route.query.searchText
    this.type = this.$route.query.type
    // console.log(this.searchText)
    // console.log(this.type)
    if(this.type!=undefined){
      this.getCountBySearchBookByType()
      this.getBookListByType()
    }else{
      this.getCountSearchBook()
      this.searchBook()

    }


  },filters:{
    url(value){
      return 'api'+value;
    }
  }
}
</script>

<style scoped>
.searchInput{
  padding-top: 3rem;
  padding-bottom: 3rem;
  width: 500px;
  margin: auto;
}
.content{
  padding-top: 1rem;

  /*min-height: 600px;*/
  display: grid;
  justify-content: space-evenly;
  grid-template-columns: repeat(auto-fill, 480px);
  grid-gap: 16px;
  overflow: hidden;
}
.item{
  padding: 0.5rem;
  width: 480px;
  border-radius: 5px;
}
.item:hover{
  background-color: rgba(84, 76, 76, 0.1);
}
.book-explain{
  /*float: left;*/
  text-align:left;
}
.item-arrow{
  /*justify-content: space-evenly;*/
  line-height: 150px;
  padding-right: 0.5rem;
}
</style>